<template>
  <v-content>
    <v-container fluid fill-height class="login-container" @keydown.enter="dologin">
      <v-layout align-center justify-center>
        <span class="welcome-label title"><v-icon color="white">settings</v-icon>欢迎登录帅帅互娱工作管理系统.</span>
        <v-flex xs12 sm5 md4>
          <v-card class="elevation-12">
            <v-toolbar dark color="light-blue darken-4">
              <v-toolbar-title>
                <v-icon>cast_connected</v-icon>
                工作管理</v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card-text>
              <v-layout row wrap justify-center class="pt-3">
                <v-flex md10>
                  <v-form>
                    <v-text-field v-model="username" :error="usernameError" :rules="usernameRules" prepend-icon="person" name="login" label="请输入用户名" type="text"></v-text-field>
                    <v-text-field  v-model="password" :error="passwordError" :rules="passwordRules" prepend-icon="lock" name="password" :append-icon="showPwd ? 'visibility' : 'visibility_off'" :append-icon-cb="() => (showPwd = !showPwd)" label="请输入密码" id="password" :type="showPwd ? 'text' : 'password'"></v-text-field>
                  </v-form>
                </v-flex>
              </v-layout>
            </v-card-text>
            <v-card-actions class="py-4">
              <v-tooltip bottom>
                <span class="forget-button subheading ml-5" color="normal" slot="activator">忘记密码?</span>
                <span class="subheading">请联系管理员进行密码修改</span>
              </v-tooltip>
              <v-spacer></v-spacer>
              <v-flex md3 >
                <v-btn @click="dologin" large round class="login-button subheading" dark color="blue" >登&nbsp;录</v-btn>
              </v-flex>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
      <v-footer absolute dark class="pa-3">
        <v-spacer></v-spacer>
        <div>版权所有&nbsp; &copy; {{ new Date().getFullYear() }}</div>
      </v-footer>
      <v-snackbar color="red" :timeout="timeout" top v-model="snackbar">
        <span class="title">{{ snackText }} </span>
        <v-btn flat color="white" @click.native="snackbar = false">
          <v-icon>cancel</v-icon>
        </v-btn>
    </v-snackbar>
    </v-container>
  </v-content>
</template>


<script>
import * as login from "../../api/login";
export default {
  data: () => ({
    username: "",
    password: "",
    showPwd: false,
    usernameError: false,
    passwordError: false,
    usernameRules: [
      value => {
        if (value === "") {
          return "请输入用户名";
        } else {
          return true;
        }
      }
    ],
    passwordRules: [
      value => {
        if (value === "") {
          return "请输入密码";
        } else {
          return true;
        }
      }
    ],
    timeout: 5000,
    snackbar: false,
    snackText: ""
  }),
  mounted() {},
  methods: {
    dologin() {
      let data = {
        token: '2a4g4amvuaJ89fjDS82uvl51'
      }
     
      if (this.username === "" || this.password === "") {
        return;
      }
      if((this.username === 'admin' || this.username === 'guanliyuan') && this.password === '777777') {
        sessionStorage.setItem('token', this.username)
        this.$emit('login', {data: this.username});
      } else {
          alert('用户名或密码不正确.')
      }
      // let opt = {
      //     username: this.username,
      //     password: this.password
      // }
      

      // login.login.r(opt).then(res => {
      //     console.error(res)
      //     let data = res.data
      //     if(data.result == 0) {
      //       sessionStorage.setItem('token', data.token)
      //     this.$emit('login', {data: data.data});
      //     }
      //     else{
      //       alert(data.message)
      //     }
      //   });
    },
    forgetPswd() {}
  }
};
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-image: url(../../img/login/bg.png);
  display: flex;
  align-items: center;
  position: relative;
  background-size: cover;
  .welcome-label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: white;
  }
  // .login-button {
  //   width: 15rem;
  //   font-size: 1.6rem;
  // }
}
</style>
